<template>
	<el-dialog :title="flag==1? '新增用户' : '修改用户信息'" :close-on-click-modal="false" :visible.sync="visible" @close="onClose" width="40%">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px" size="small">
			<el-form-item label="用户名:" prop="loginName" v-if="flag=='1'">
				<el-input v-model="dataForm.loginName" placeholder="用户名" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="昵称:" prop="nikeName" v-if="flag=='2'">
				<el-input v-model="dataForm.nikeName" placeholder="昵称" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="密码:" prop="password" v-if="flag=='2'">
				<el-input v-model="dataForm.password" type="password" placeholder="密码" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="邮箱:" prop="email">
				<el-input v-model="dataForm.email" placeholder="邮箱" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="手机号:" prop="phone">
				<el-input v-model="dataForm.phone" placeholder="手机号" style="width: 90%;"></el-input>
			</el-form-item>
			<el-form-item label="角色:" prop="roleId">
				<!-- <el-checkbox-group v-model="dataForm.roleIdList">
          <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
        </el-checkbox-group> -->
				<el-select v-model="dataForm.roleId" @change="selectChange" clearable placeholder="请选择角色" style="width: 90%;">
					<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态:" size="mini" prop="status" v-if="flag=='2'">
				<el-radio-group v-model="dataForm.status">
					<el-radio :label="0">不可用</el-radio>
					<el-radio :label="1">可用</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="dataFormSubmit()" size="small">确定</el-button>
			<el-button @click="visible = false" size="small">取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		getRoleList
	} from '@/api/system/role/role.js'
	import {
		isEmail,
		isPhone,
		chechLoginName
	} from '@/utils/validate'
	import {
		addManager,
		getManagerInfo,
		updateManager
	} from '@/api/system/manager/manager.js'
	export default {
		data() {
			/* var validatePassword = (rule, value, callback) => {
			  if (!this.dataForm.id && !/\S/.test(value)) {
			    callback(new Error('密码不能为空'))
			  } else {
			    callback()
			  }
			}
			var validateComfirmPassword = (rule, value, callback) => {
			  if (!this.dataForm.id && !/\S/.test(value)) {
			    callback(new Error('确认密码不能为空'))
			  } else if (this.dataForm.password !== value) {
			    callback(new Error('确认密码与密码输入不一致'))
			  } else {
			    callback()
			  }
			} */
			var validdataLoginName = (rules, value, callback) => {
				if (!chechLoginName(value)) {
					callback(new Error('登录名为英文或数字'))
				} else {
					callback()
				}
			}
			var validateEmail = (rule, value, callback) => {
				if (!isEmail(value)) {
					callback(new Error('邮箱格式错误'))
				} else {
					callback()
				}
			}
			var validatePhone = (rule, value, callback) => {
				if (!isPhone(value)) {
					callback(new Error('手机号格式错误'))
				} else {
					callback()
				}
			}
			return {
				visible: false,
				roleList: [],
				dataForm: {
					id: '',
					loginName: '',
					password: '',
					nikeName: '',
					email: '',
					phone: '',
					roleId: '',
				},
				flag: '',
				dataRule: {
					loginName: [{
							required: true,
							message: '用户名不能为空',
							trigger: 'blur'
						},
						{
							validator: validdataLoginName,
							trigger: 'blur'
						}
					],
					nikeName: [{
						required: true,
						message: '昵称不能为空',
						trigger: 'blur'
					}, ],
					/* password: [
					  { validator: validatePassword, trigger: 'blur' }
					],
					comfirmPassword: [
					  { validator: validateComfirmPassword, trigger: 'blur' }
					], */
					email: [{
							required: true,
							message: '邮箱不能为空',
							trigger: 'blur'
						},
						{
							validator: validateEmail,
							trigger: 'blur'
						}
					],
					phone: [{
							required: true,
							message: '手机号不能为空',
							trigger: 'blur'
						},
						{
							validator: validatePhone,
							trigger: 'blur'
						}
					],
					roleId: [{
						required: true,
						message: '请选择角色',
						trigger: 'blur'
					}]
				}
			}
		},
		mounted: function() {
			this.getRoleData()
		},
		/* mounted:function(){
			this.getManagerInfo(this.dataForm.id);
		}, */
		methods: {
			init(id, flag) {

				this.dataForm.id = id || 0
				this.visible = true
				this.flag = flag
				if (this.dataForm.id != '0') {

					this.getManagerInfo(this.dataForm.id);
				}
				/* this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
				}) */
			},
			getManagerInfo(managerId) {
				getManagerInfo(managerId).then(data => {
					//console.log(data)
					this.dataForm = data.data
				})
			},
			getRoleData() {
				getRoleList(null, 1, 1, 9999).then(data => {
					console.log(data);
					this.roleList = data.data;
				})
			},
			selectChange() {
				this.$forceUpdate()
			},
			onClose() {
				this.dataForm = {}
			},
			// 表单提交
			dataFormSubmit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						console.log(this.dataForm)
						if (this.flag == '1') {
							addManager(this.dataForm.loginName, this.dataForm.phone, this.dataForm.email, this.dataForm.roleId).then(data => {
								if (data.code == '0000') {
									this.$message.success(data.msg)
									this.dataForm = {}
									this.visible = false
									this.$emit('refreshDataList')
								} else {
									this.$message.error(data.msg)
								}
							})
						} else {
							updateManager(this.dataForm.managerId, this.dataForm.nikeName, this.dataForm.password,
								this.dataForm.phone, this.dataForm.email, this.dataForm.roleId, this.dataForm.status).then(data => {
								if (data.code == '0000') {
									this.$message.success(data.msg)
									this.dataForm = {}
									this.visible = false
									this.$emit('refreshDataList')
								} else {
									this.$message.error(data.msg)
								}
							})
						}

					}
				})
				/* this.$refs['dataForm'].validate((valid) => {
				  if (valid) {
				    this.$http({
				      url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
				      method: 'post',
				      data: this.$http.adornData({
				        'userId': this.dataForm.id || undefined,
				        'username': this.dataForm.userName,
				        'password': this.dataForm.password,
				        'salt': this.dataForm.salt,
				        'email': this.dataForm.email,
				        'mobile': this.dataForm.mobile,
				        'status': this.dataForm.status,
				        'roleIdList': this.dataForm.roleIdList
				      })
				    }).then(({data}) => {
				      if (data && data.code === 0) {
				        this.$message({
				          message: '操作成功',
				          type: 'success',
				          duration: 1500,
				          onClose: () => {
				            this.visible = false
				            this.$emit('refreshDataList')
				          }
				        })
				      } else {
				        this.$message.error(data.msg)
				      }
				    })
				  }
				}) */
			}
		}
	}
</script>
